
import styled from 'styled-components';
import { useParams, useNavigate } from 'react-router-dom';
import React, { CSSProperties, FC, useCallback, useEffect, useState } from 'react';
import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import { SimpleDigitalHumanPage } from './simple';
import { TopHeader } from '@/components';

export interface DigitalHumanConfigPageProps {
    style?: CSSProperties;
    projectIdentifier: string;
}

export const DigitalHumanConfigPage: FC<DigitalHumanConfigPageProps> = (props) => {

    const [active, setActive] = useState<string>('数字人');

    return (
        <Container data-tauri-drag-region>
            <Header>
                <TopHeader
                    items={[
                        {
                            label: '数字人',
                            key: '数字人',
                        }, {
                            label: '直播伴侣',
                            key: '直播伴侣',
                        }, {
                            label: 'AI自动直播',
                            key: 'AI自动直播',
                        }
                    ]}
                    activeKey={active}
                    onChange={async (key: string) => {
                        setActive(key);
                    }}></TopHeader>
            </Header>
            <Content>
                {
                    active === '数字人' && <SimpleDigitalHumanPage style={{}} projectIdentifier={props.projectIdentifier}></SimpleDigitalHumanPage>
                }
                {
                    active === '直播伴侣' && <>敬请期待~</>
                }
                {
                    active === 'AI自动直播' && <>敬请期待~</>
                }
            </Content>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 40;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #DEDEDE;
`;

const Content = styled.div`
    width: 100%;
    background-color: #FFFFFF;
    flex: 1;
`;

export default DigitalHumanConfigPage


